<template>
  <div>
    <el-row>
      <el-col :span="2">
      <img src="@/assets/img/logo.png" width="150px" height="60px"/>
      </el-col>

      <el-col :span="22">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
        >
      
      
          <el-menu-item index="/"> 
            
            <div class="bb">博客</div> 

             </el-menu-item>
             
          <el-menu-item index="/classify">
             <div class="bb">分类</div>
              </el-menu-item>

          <el-menu-item index="3">  <div class="bb">消息中心</div></el-menu-item>
          <el-menu-item index="/VIP"> <div class="bb">VIP</div></el-menu-item>



          <el-menu-item  class="aa">
            <div class="cc">
          <el-input clearable placeholder="请输入内容" v-model="Search" class="input-with-select" v-on:keyup.enter.native="goSearch()">
            <el-button slot="append" icon="el-icon-search" type="primary" @click="goSearch()"></el-button>
          </el-input>
           </div>
          </el-menu-item>



          <el-menu-item index="/login" v-if="!login">

            <el-button type="primary" icon="el-icon-user-solid" circle
            ></el-button>

          </el-menu-item>



          <el-submenu index="/profile" v-else>
              <template slot="title">
              <el-avatar :src="user.avatar"></el-avatar>
              你好！{{user.username}} 
               </template>
            <el-menu-item index="/profile">
              <i class="el-icon-user"></i>
              个人中心 

              </el-menu-item>

            <el-menu-item index="/create-article"><i class="el-icon-edit"></i>
              写文章
              
              </el-menu-item>
            <el-menu-item index="7-3"  @click="logout"
              ><i class="el-icon-switch-button"></i>
              退出</el-menu-item>
            </el-submenu>
          

        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getUserInfo} from '@/api/user'
import {getToken,removeToken} from '@/request/token'

export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      input: "/",
      login: false,
      user:{},
      Search: ""
    };
  },
  methods: {
    goSearch(){
      if(this.Search===null||this.Search===''){
        return  this.$message.error('内容不能为空');
      }
      this.$router.push({
        name:'searchResults',
        query:{
          'searchInfo':this.Search
        }
      })
      location.reload()
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    
    logout(){
      
      removeToken();
      this.user={};
      this.login=false
      this.$router.push("/home")
    }
  },
  created(){
    const token=getToken();
    if(token!=null){
    getUserInfo(token).then(res=>{
      if(!res.success){
        this.login=false
      }else{
        this.login=true
        this.user=res.data
      
      }
      
    })
  }
  }
};
</script>

<style scoped  lang="less">
.el-row {
  margin-bottom: 20px;
  z-index: 10;

  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-input-group__append button.el-button,
.el-input-group__append div.el-select .el-input__inner,
.el-input-group__append div.el-select:hover .el-input__inner,
.el-input-group__prepend button.el-button,
.el-input-group__prepend div.el-select .el-input__inner,
.el-input-group__prepend div.el-select:hover .el-input__inner {
  border-color: #409eff;
  background-color: #409eff;
  color: white;
  border-top: 0;
  border-bottom: 0;
}
.el-menu-demo {
  z-index: 1;
}

a {
  text-decoration: none;
 
}
.bb {
  width: 100px;
  height: 60px;
}

.cc {
  width: 350px;
}
.el-menu {
  margin: 0 ;
  // margin-left: 100px;
}
.el-menu--horizontal>.el-menu-item:nth-child(5) {
  margin-left: 8%;
  float: left ;
}


</style>